<template>
    <div v-if="settings.isLoadingShow" class="global-loading">
        <!-- 转圈 -->
        <!-- <div class="spinner"></div> -->
        <!-- 电池 -->
        <!-- <div class="progress-5"></div> -->
        <!-- 内嵌 -->
        <div class="progress-6"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount }from'vue'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()

// 定义一个可响应的变量来控制 Loading 的可见性 // 暂时不用改用状态机的
const visible = ref(false)

let timer = ref()

// 导出显示和隐藏 Loading 的方法
const showGlobalLoading = () => {
    visible.value = true
}
const hideGlobalLoading = () => {
    visible.value = false
}

window.showGlobalLoading = () => {
    showGlobalLoading()
    timer.value = setTimeout(() => {
        hideGlobalLoading()
    }, 25000)
}

window.hideGlobalLoading = () => {
    hideGlobalLoading()
}

onMounted(() => {

})

onBeforeUnmount(() => {
    timer.value = null
})

</script>

<script>
export default {
name:'GlobalLoading',
}
</script>


<style scoped>
.global-loading {
    width:100vw;
    height: 100vh;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background:rgba(255,255,255,0.8); */
    background:rgba(0,0,0,0.1);
    z-index:9999;
    overflow: hidden;
}
/* 普通转圈 */
.spinner{
    border:4px solid rgba(0,0,0,0.1);
    border-left-color:#00FFFF;
    border-radius:50%;
    width:40px;
    height:40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
/* 电池 */
.progress-5 {
    width:80px;
    height:40px;
    border:2px solid #000;
    padding:3px;
    background: 
    repeating-linear-gradient(90deg,#000 0 10px,#0000 0 16px) 
    0/0% no-repeat content-box content-box;
    position: relative;
    animation:p5 2s infinite steps(6);
}
.progress-5::before {
    content:"";
    position: absolute;
    top: 50%;
    left:100%;
    transform: translateY(-50%);
    width:10px;
    height: 10px;
    border: 2px solid #000;
}
@keyframes p5 {
    100% {background-size:120%}
}
/* 内嵌 */
.progress-6 {
    width:120px;
    height:22px;
    border-radius: 20px;
    color: #514b82;
    border:2px solid;
    position: relative;
}
.progress-6::before {
    content:"";
    position: absolute;
    margin:2px;
    inset:0 100% 0 0;
    border-radius: inherit;
    background: #514b82;
    animation:p6 2s infinite;
}
@keyframes p6 {
    100% {inset:0}
}

</style>